﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>动态绑定样式</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        .black0{background-color: black}
        .font0{font-size:50px}
        .border0{border:solid red 1px}
        .blue1{background-color: blue}
        .red2{background-color: red}
        .yellow3{background-color: yellow}
    </style>
</head>
<body>
<h1>动态绑定样式</h1><br/>

<div id="app">
    {{name}}<br/>
    <!--teamplte标签在vue中没有实际意义，用来包裹元素的   其中v-show不支持teamplte-->
    <template v-if="flag">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </template>
    <div v-else="flag">v-else必须跟在v-if后面，也就是连着写</div>
    <br/>
    <button @click="cut=!cut">点我啊</button>
    <template v-if="cut">
        <label>label1</label>
        <input type="text">
        <p>当两个内容一样，不加key系统会认为这是一个，就不会重新渲染了。
            比如这里的input,除非属性不一样，或者加上key,key不一样代表两个元素不是同一个</p>
        <input type="text" key="1">
    </template>
    <template v-else>
        <label>label2</label>
        <input type="text">
        <input type="text" key="2">
    </template>
    <p>
        v-bind动态绑定属性和样式
    </p>
    <p class="blue1 font0" :class="style1?'border0':''">
        :class绑定的样式和class绑定的不冲突,可以又写class还写:class
    </p>
    <p>
        <p>对象绑定</p>
        <p class="blue1 font0" :class="{border0:style1,yellow3:style1}">对象绑定可以有多个</p>
    </p>
    <p>
        <p>对象绑定2</p>
        <p class="blue1 font0" :class="objBorder">对象写在data里</p>
    </p>
    <p>
        <p>数组绑定</p>
        <p class="blue1 font0" :class="['border0','']">数组绑定</p>
    </p>
    <p>
        <p>隔行变色</p>
        <p class="blue1 font0" v-for="(v,i) in 5" :class="{red2:i%2}">隔一行使用一次red样式</p>
    </p>
    <p>
        <p>:style的使用</p>
        <p :style="{backgroundColor:'green'}">里面的命名规则和js的写法一样是就驼峰的不是-隔开</p>
    </p>
    <p>
    <p>:style的使用数组的方式</p>
    <p :style="styleArr">里面的命名规则和js的写法一样是就驼峰的不是-隔开</p>
    </p>

</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据',
            flag:false,
            cut:true,
            style1:true,
            objBorder:{
                border0:true
            },
            styleArr:[
                {backgroundColor:'green'},
                {fontSize:'50px'},
            ]
        }
    });
</script>

</body>
</html>